<template>
  <div class="clue_import">
    <Tabs type="card" v-model="allotStatus" :animated="false" name='allot'
      @on-click="onChangeTab">
      <TabPane label="未分配" name="no_Allot" tab="allot">
        <no-allot ref="noAllot" v-if="allotStatus == 'no_Allot'" />
      </TabPane>
      <TabPane label="分配中" name="wait_Allot" tab="allot">
        <wait-allot ref="waitAllot" v-if="allotStatus == 'wait_Allot'" />
      </TabPane>
      <TabPane label="已分配" name="rejected_Allot" tab="allot">
        <rejected-allot ref="rejectedAllot" v-if="allotStatus == 'rejected_Allot'" />
      </TabPane>
    </Tabs>

  </div>
</template>

<script>
  import noAllot from './component/NoAllot.vue'
  import waitAllot from './component/waitAllot.vue'
  import rejectedAllot from './component/rejectedAllot.vue'
  export default {
    components: {
      noAllot,
      waitAllot,
      rejectedAllot
    },
    data() {
      return {
        allotStatus: '',
        oldState: '',
        batchId: ''
      }
    },
    methods: {
      onChangeTab(val) {
        console.log(val, '^^^^')
        if (val == this.oldState) return false
        this.allotStatus = val
        this.oldState = val
        // this.init(true)
      }
    },
    mounted() {
      let status = this.$route.query.status
      if (status) {
        this.onChangeTab(status)
      }
    }
  }
</script>

<style>
  .clue_import {
    padding: 20px;
  }
</style>